<script setup>
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {HTTP} from "@/api/HTTP.js";
import {ElMessage} from "element-plus";

const router = useRouter()

// 用户默认头像
const defaultAvatar = ref('https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png')

// 返回上一页
const handleBack = () => {
  router.back()
}

// 保存密码
let dialogFormVisible = ref(false)
const form = ref({
  usermessage: '',
  code: ''
})

const getCode = async () => {
  try {
    await HTTP.get(`/bind/email/get?usermessage=${form.value.usermessage}`)
        .then(res => {
          console.log(res)
          if (res.code === 10200) {
            ElMessage({
              message: '验证码发送成功',
              type:'success',
            });
          } else {
            ElMessage({
              message: '验证码发送失败',
              type: 'error',
            });
          }
        })
  } catch (e) {
    ElMessage({
      message: '发送失败',
      type: 'error',
    });
  }
}

// 输入密码
const hanleYes = async () => {

  try {
    let formData = new FormData();
    formData.append("usermessage", form.value.usermessage);
    formData.append("code", form.value.code);

    if ((form.value.usermessage === '')||(form.value.code === '')) {
      ElMessage({
        message: '信息不能为空',
        type: 'error',
      });
      return;
    }
    await HTTP.post('/bind/email/post', formData)
        .then(res => {
          console.log(res)
          if (res.code === 10200) {
            ElMessage({
              message: `验证成功`,
              type: 'success',
            });
            localStorage.setItem('changeToken', res.data.jwt_token)
            dialogFormVisible.value = false
            router.push("/center/account")
          } else {
            ElMessage({
              message: '验证失败',
              type: 'error',
            });
          }
        })

  } catch (e) {
    ElMessage({
      message: '验证失败',
      type: 'error',
    });
  }
}

// 存储请求回来的用户数据
const user = ref({})
// 异步获取用户数据
const fetchUserData = async () => {
  try {
    const response = await HTTP.get('/user');
    console.log(response.data);
    user.value = response.data;
  } catch (error) {
    console.error('Error fetching user data:', error);
  }
};

onMounted(() => {
  fetchUserData();
});
const centerJson = [
  {
    id: 1,
    name: '地址管理',
    path: '/center/address'
  },
  {
    id: 2,
    name: '信息管理',
    path: '/center/information'
  },
  {
    id: 3,
    name: '账号管理',
    path: '/center/account'
  }
]

const handleSkip = (item) => {
  console.log(item.id)
  if (item.id === 3){
    dialogFormVisible.value = true
  }
  else {
    router.push(item.path)
  }
}
</script>

<template>
  <div class="center">
    <h1>
      <i class="iconfont icon-fanhui4"
         @click="handleBack"
      ></i>
    </h1>

    <div class="center_main">
      <div class="center_avatar">
        <img :src="user.image?user.image:defaultAvatar" alt="...">
        <p>欢迎来到个人中心~~喵</p>
      </div>

      <div class="center_main_btn">
        <button type="button" @click="handleSkip(item)" v-for="item in centerJson" :key="item.id"
                class="btn btn-outline-secondary">{{ item.name }}
        </button>
      </div>
    </div>
  </div>

  <!--  密码验证-->
  <el-dialog  v-model="dialogFormVisible" title="喵喵需要验证您的身份偶~~" width="500">
    <div style="width: 400px;margin: 0 auto;">
      <el-form :model="form">
        <el-form-item label="账号" label-width="60px">
          <el-input v-model="form.usermessage" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="验证码" label-width="60px">
          <el-input v-model="form.code" autocomplete="off"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="getCode">获取验证码</el-button>
        <el-button type="primary" @click="hanleYes">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.center {
  width: 1535px;
  height: 100vh;
  margin: 0 auto;

  h1 {
    i {
      cursor: pointer;
      font-size: 40px;
      font-weight: bold;
    }
  }


  .center_main {
    width: 500px;
    height: 80vh;
    margin: 100px auto;

    .center_avatar {
      width: 300px;
      height: 300px;
      margin: 0 auto;

      img {
        width: 200px;
        height: 200px;
        border: 2px solid black;
        border-radius: 20%;
        margin: 0 auto;

      }

      p {
        width: 300px;
        margin-top: 20px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
      }
    }

    .center_main_btn {
      width: 300px;
      height: auto;
      margin: 0 auto;
      display: flex;
      flex-direction: column;

      .btn {
        width: 300px;
        height: 60px;
        margin-bottom: 50px;
        font-size: 20px;
      }
    }
  }
}
</style>